// 设计稿尺寸
@designWidth: 1920;
@designHeight: 1080;

// 响应式单位转换
.vw(@value, @px) {
  @{value}: (@px / @designWidth) * 100vw;
}

.vh(@value, @px) {
  @{value}: (@px / @designHeight) * 100vh;
}

// 自适应字体大小
.font(@px) {
  font-size: clamp(
    (@px / 1.5) * 1px,
    (@px / @designWidth) * 100vw,
    @px * 1.2px
  );
}

// 常用颜色变量
@primary-color: #409eff;
@success-color: #67c23a;
@warning-color: #e6a23c;
@danger-color: #f56c6c;
@info-color: #909399;

// 常用边距
@margin-xs: 4px;
@margin-sm: 8px;
@margin-md: 16px;
@margin-lg: 24px;
@margin-xl: 32px;

// 常用内边距
@padding-xs: 4px;
@padding-sm: 8px;
@padding-md: 16px;
@padding-lg: 24px;
@padding-xl: 32px;

// 常用圆角
@border-radius-xs: 2px;
@border-radius-sm: 4px;
@border-radius-md: 6px;
@border-radius-lg: 8px;
@border-radius-xl: 12px;

// 常用阴影
@shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.1);
@shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
@shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);

// 布局类
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

// 文字省略
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 滚动条样式
.scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;

    &:hover {
      background: #a8a8a8;
    }
  }
}

// 动画
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
